<script>
import zfb from '../assets/zfb.png'
import { Fold, Expand } from '@element-plus/icons-vue'
// 导入侧边栏,@ 是在 vite.config.js 中配置的是 src 路径
// 也就意味着以后要找 src 路径就可以直接使用 @ 符号
import AsideCom from '@/components/AsideCom.vue'
import BreadcrumbCom from '@/components/BreadcrumbCom'

import { mapState, mapMutations } from 'vuex'


export default {
  data () {
    return {
      url: zfb,
      // 标记当前侧边栏是展开还是收起
      collapse: false
    }
  },
  mounted () {
    // console.log(this.$store.state.userInfo.adminname);
    if (!this.$store.state.userInfo.adminname) {
      this.$router.push('/login')
    }
  },
  methods: {
    ...mapMutations(['updateUserInfo']),
    logout () {
      // 退出登录按钮的点击事件
      // 清除所有本地的存储
      localStorage.clear()
      // 请求全局状态管理中的 userInfo
      this.updateUserInfo({})
      // 重新跳转到登录页面
      this.$router.push('/login')
    },
    setCount () {
      // console.log(this.$store);

      // commit 是用来 调用 store 的 mutations 中定义的方法的
      // this.$store.commit('add')

      // dispatch 是用来调用 actions 中的方法
      // this.$store.dispatch('addActions')


      // 传参
      // this.$store.commit('addNum', 5)

      this.$store.dispatch('addNumActions', 10)




    }
  },
  computed: {
    ...mapState(['userInfo']),
    headerLeft () {
      return this.collapse ? 'Expand' : 'Fold'
    },
    asideWidth () {
      return this.collapse ? '54px' : '200px'
    }
  },
  // 局部注册组件
  components: {
    Fold,
    Expand,
    // 注册侧边栏组件
    AsideCom,
    BreadcrumbCom
  }
}
</script>
<template>
  <div class="common-layout">
    <el-container>

      <!-- 左边侧边栏 -->
      <el-aside>
        <div class="logo-box">
          <el-image style="width: 32px;height: 32px" :src="url"></el-image>
          <h2 class="manage-title" v-show="!collapse">电商后台管理系统</h2>
        </div>
        <!-- 使用侧边栏组件，将是否展开的属性传递过去 -->
        <AsideCom :collapse="collapse" />
      </el-aside>



      <!-- 右侧内容部分 -->
      <el-container>
        <!-- 头部 -->
        <el-header>
          <el-icon size="30" @click="collapse = !collapse">
            <component :is="headerLeft"></component>
          </el-icon>

          <!-- 没有登录的情况下 -->
          <el-button v-if="!userInfo.adminname" @click="$router.push('/login')"> 请登录 </el-button>
          <!-- 有登录的情况下 -->
          <p v-else>
            <span style="margin-right: 10px;">欢迎：{{ userInfo.adminname }}</span>
            <el-button @click="logout"> 退出登录 </el-button>
          </p>

        </el-header>

        <!-- 主体内容 -->
        <!-- 第一种使用全局状态的方法 -->
        <el-main>
          <BreadcrumbCom />
          <!-- Main --- {{ $store.state.count }} --- 欢迎 {{ $store.state.userInfo.adminname }}
                              <el-button @click="setCount"> 修改全局状态中的数据 </el-button>
                              <el-button @click="$router.push('/login')"> 修改全局状态中的数据 </el-button> -->

          <!-- 显示的是二级路由 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style lang="scss" scoped>
.el-container {
  background-color: #ffeaa7;

  .el-aside {
    background-color: #dff9fb;
    /* 可以在 sass 直接使用上面定义的值 */
    width: v-bind(asideWidth);
    transition: all 0.2s;
    overflow: hidden;

    .logo-box {
      height: 60px;
      display: flex;
      align-items: center;
      padding: 0 10px;
    }

    .manage-title {
      font-size: 16px;
      margin-left: 10px;
    }
  }
}

.el-header {
  background-color: #a5d8ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-main {
  background-color: #f1f2f6;
}
</style>
